<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/Normalize.css">
    <style type="text/css">
        /* 给不同终端设置不同的html font-size */
        html{
            font-size: 18px;
        }
        p{
           font-family: 方正鲁迅行书简, 微软雅黑, 黑体, 宋体, 'Microsoft YaHei',Courier, monospace;
           /* font--size: 2vw; */
           line-height: 1.5;
           transition-property: color;
           transition-duration: .5s;
           color: #000;
           border: 1px solid #f00;
           border-width: 10px;
           border-style: solid;
        }
        p:hover{
            color: #f00;
        }
    </style>
</head>
<body>
<!-- 
HTML 结构
CSS  美化、布局
JS   动态交互
动态网页开发
    前端 HTML+CSS+JS（网页端、小程序端、移动端等跨端实现）
         模拟接口（假的），新闻标题、作者、ID、内容、图片
         HTML里需要替换的内容，从后端查询出来替换。
    数据 数据库、新闻接口。
    后端 实现接口（查询内容）
         管理系统，新闻页面的增删改查。
    
MVC
    逻辑
    数据
    视图
前端的分离
    内容 HMTL（WXML）   内容（跨端内容一致）
    样式 CSS （WXSS）   样式（跨端样式不同，pc.css mobile.css wx.css）
    行为 JS  （WXJS）   行为（PC端click，mobile端touch事件）


cheat sheet 小抄  
    html cheat sheet
    java cheat sheet
awesome
    Font Awesome 图标字体

CSS Snapshot 2021

资源 
    https://www.w3.org/Style/CSS/
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
    http://css.doyoe.com/

层叠原则
    后面比前面强
    级别高比级别低强
    距离近的强

语法
    @规则
    规则集
        选择符
        声明块
            声明
                属性
                属性值，类别值，数量+单位，数量，组合值。

取值与单位
    长度单位
        px
        em    当前文字倍数
        rem   根元素文字倍数
        vw    根据视口宽度均分100

CSS中90%的学习，学习各种属性用途、用法
CSS中10%的学习，学习选择器

样式分类
    默认样式
        user agent stylesheet
    声明样式
        重置样式(统一不同浏览器的元素默认样式，大牛写的)
            Normalize.css, A modern alternative to CSS resets
        开发者样式
            外部样式 网站
            页内样式 网页
            行内样式 元素  element.style
    计算样式
        computed style

CSS调试
    声明被划掉（层叠）
        该声明被覆盖。
        该声明别注释。
    声明被划掉，同时有警告。
        属性值错误，Invalid property value
        属性错误，  Unknown property name
    没划掉，没警告。
        整段规则没出来
            选择符错啦。
        清除缓存。
        逻辑错误。
        文档错误。
-->
<p>
    段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字
</p>
</body>
</html>